<script setup lang="ts">
import { computed,ref } from 'vue';
import type {ComputedRef, Ref} from 'vue'

const price:Ref<number> =ref(100)
  // 类型不加也可，有类型推断
  //一、只读的计算属性
const priceVip: ComputedRef<number>=computed(()=>{
  return price.value *0.8
})

function changeprice(){
  price.value=200
}

  //二、可写的计算属性
const priceSvip :ComputedRef<number>=computed({
  get(){
    return price.value*0.2
  },
  set(newvalue){
    price.value=newvalue/0.2
  }
},{
  onTrack(e){
    //获取值的时候可以拿到
    console.log(e);
    // debugger
  },
  onTrigger(e){
    // 设置值的时候调用
    console.log(e);
    // debugger
  }
})
function changepriceSvip(){
  priceSvip.value=100;
}

</script>

<template>
  <h1>price:{{ price }}"元</h1>
  <h1>priceVip:{{ priceVip }}元"</h1>
  <h1>priceSvip:{{ priceSvip }}元</h1>
  <button @click="changeprice">修改价格</button>
  <button @click="changepriceSvip">修改svip价格</button>  
</template>